<template>
  <div class="topside">
    <div class="right">
      <el-badge :value="ordersize" class="item">
        <el-button size="small" @click="enterorder">工单待办</el-button>
      </el-badge>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <h4>{{ username }}</h4>
          <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix" @click.native="getuserinfo">
            用户信息
          </el-dropdown-item>
          <!-- <el-dropdown-item class="clearfix" @click.native="addChat">
            关注企业微信
          </el-dropdown-item> -->
          <el-dropdown-item class="clearfix" @click.native="resetpsd">
            修改密码
          </el-dropdown-item>
          <el-dropdown-item class="clearfix" @click.native="loginout">
            退出登陆
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
       <el-dropdown trigger="click" :hide-on-click="false">
        <span class="el-dropdown-link">
          <h4 style="margin-right:10px;">设置</h4>
          <i class="el-icon-setting"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix">
            <el-switch v-model="push" @change="changepush"  active-text="告警推送" ></el-switch>
          </el-dropdown-item>
          <el-dropdown-item class="setting clearfix" @click.native="open">
             <span>运维配置</span>
          </el-dropdown-item>
         
        </el-dropdown-menu>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
<el-drawer
  title="运维配置"
  :visible.sync="dialog"
  direction="rtl"
  custom-class="demo-drawer"
  ref="drawer"
  :append-to-body="true"
  >
  <div class="demo-drawer__content">
    <el-form :model="form">
      <div class="model-title">电池仓层告警</div>
      <el-form-item label="启用" :label-width="formLabelWidth">
        <el-switch v-model="form.warehouseAlarmSwitch"></el-switch>
      </el-form-item>
      <el-form-item label="通道定温告警阈值" :label-width="formLabelWidth">
        <el-input v-model="form.whFixedTemp" autocomplete="off" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="通道升温告警阈值" :label-width="formLabelWidth">
        <el-input v-model="form.whHeatUpTemp" autocomplete="off" style="width:80%"></el-input>
      </el-form-item>
      <br/>
      
      <div class="model-title">通道测温点温差告警(1-30通道)</div>
      <el-form-item label="启用" :label-width="formLabelWidth">
        <el-switch v-model="form.aisleDiffAlarmSwitch"></el-switch>
      </el-form-item>
      <el-form-item label="温差告警阈值" :label-width="formLabelWidth">
        <el-input v-model="form.aisleDiffTemp" autocomplete="off" style="width:80%"></el-input>
      </el-form-item>

    </el-form>
    <div class="demo-drawer__footer">
      <el-button @click="cancelForm" style="background:transparent;border-color: #409EFF">取 消</el-button>
      <el-button type="primary" @click="sub" style="background:transparent;">修改</el-button>
    </div>
  </div>
</el-drawer>

    <!-- 修改密码 -->
    <el-dialog
      class="password-update"
      title="修改密码"
      :inline="true"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="updateform"
        label-position="left"
        label-width="100px"
        ref="updateruleform"
        :rules="updaterules"
      >
        <el-form-item label="原密码" prop="oldpassword">
          <el-input type="password" v-model="updateform.oldpassword"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="updateform.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input type="password" v-model="updateform.repassword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatepassword(updateform)"
            >确认修改</el-button
          >
          <el-button @click="updateout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 用户信息 -->
    <el-dialog
      class="staff-info"
      title="用户信息"
      :inline="true"
      :visible.sync="dialogFormVisible1"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="staffform"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="用户账号">
          <el-input :value="staffform.accounts" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input :value="staffform.mail" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input :value="staffform.mobile" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="员工类型">
          <el-input :value="staffform.type" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="员工名称">
          <el-input :value="staffform.userName" readonly="readonly"></el-input>
        </el-form-item>
        <!-- <el-form-item label="企业微信">
          <el-button @click="authorChat">登录绑定</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="updatebtn">编辑</el-button>
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 用户信息编辑 -->
    <el-dialog
      class="staff-update"
      title="修改用户"
      :inline="true"
      :visible.sync="dialogFormVisible2"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="staffform"
        label-position="left"
        label-width="100px"
        ref="updateinforuleform"
        :rules="updateinforules"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="staffform.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="staffform.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="mail">
          <el-input v-model="staffform.mail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatestaff(updateform)"
            >修改</el-button
          >
          <el-button @click="updatestaffout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
   
    <el-dialog
      :visible.sync="loginChatVisible"
      :append-to-body="true"
      width="340px"
      :show-close="false"
    >
    <WChatLogin v-if="loginChatVisible"/>
    </el-dialog>

    <el-dialog
      :visible.sync="addChatVisible"
      :append-to-body="true"
      width="365px"
      :show-close="false"
    >
    <WChatAdd v-if="addChatVisible" :src="addChatSrc"/>
    </el-dialog>

  </div>
</template>
<script>
import WChatLogin from "../components/WChatLogin";
import WChatAdd from "../components/WChatAdd";
export default {
  components: { WChatLogin, WChatAdd },
  name: "top",
  data() {
    //员工手机验证
    let validMobile = (rule, value, callback) => {
      if (value == "" || value == undefined) {
        callback(new Error("手机号不能为空"));
      } else {
        let reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (!reg.test(value)) {
          callback(new Error("手机号格式不对"));
        } else {
          callback();
        }
      }
    };
    //验证密码一致性
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.updateform.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loginChatVisible: false,
      addChatVisible: false,
      dialog: false,
      loading: false,
      addChatSrc: "",
      username: "",
      ordersize: 0,
      push: "",
      usertype: "",
      dialogFormVisible: false, //修改密码弹窗
      dialogFormVisible1: false, //用户信息弹窗
      dialogFormVisible2: false, //用户信息编辑弹窗
      form: {
        whFixedTemp: "",
        whHeatUpTemp: "",
        warehouseAlarmSwitch: true,
        aisleDiffAlarmSwitch: true,
        aisleDiffTemp: "",
      },
      formLabelWidth: "150px",
      timer: null,
      updateform: {
        oldpassword: "",
        password: "",
        repassword: "",
      },
      staffform: {},
      updaterules: {
        oldpassword: [
          { required: true, message: "原密码不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "现密码不能为空", trigger: "blur" },
        ],
        repassword: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
      },
      updateruleform: {
        oldpassword: "",
        password: "",
        repassword: "",
      },
      updateinforules: {
        mobile: [{ required: true, validator: validMobile, trigger: "blur" }],
        mail: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
      },
      updateinforuleform: {
        mobile: "",
      },
    };
  },
  methods: {
    authorChat() {
      this.loginChatVisible = true;
    },
    addChat() {
      let that = this;
      this.$http.get("/weChat/qrCode").then((res) => {
        that.addChatSrc = res.data.b;
        that.addChatVisible = true;
      });
    },
    keyDown(e) {
      if (e.ctrlKey && e.keyCode == 81) {
        this.push = !this.push;
        this.resetSetItem("push", JSON.stringify(this.push));
        if (this.push) {
          this.$message({
            message: "您已接受告警推送",
            type: "success",
          });
        } else {
          this.$message({
            message: "您已拒绝告警推送",
            type: "warning",
          });
        }
      } else {
        return;
      }
    },
    changepush(val) {
      this.resetSetItem("push", JSON.stringify(val));
    },
    //用户信息
    getuserinfo() {
      let params = {
        userId: JSON.parse(sessionStorage.getItem("userinfo")).userId,
      };
      this.$http
        .post("/user/info", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.dialogFormVisible1 = true;
            this.staffform = res.data.b;
          }
        })
        .catch((err) => {});
    },
    resetpsd() {
      this.dialogFormVisible = true;
    },
    updatebtn() {
      this.dialogFormVisible1 = false;
      this.dialogFormVisible2 = true;
    },
    updateformclear() {
      for (let i in this.updateform) {
        this.updateform[i] = "";
      }
    },
    updateout() {
      this.$refs.updateruleform.clearValidate();
      this.dialogFormVisible = false;
      this.updateformclear();
    },
    updatestaffout() {
      this.$refs.updateinforuleform.clearValidate();
      this.dialogFormVisible2 = false;
      this.updateformclear();
    },
    //修改密码
    updatepassword(form) {
      let params = {
        oldPassword: form.oldpassword,
        password: form.password,
        rePassword: form.repassword,
        userId: JSON.parse(sessionStorage.getItem("userinfo")).userId,
      };
      this.$http
        .post("/user/modifyPwd", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.loginout();
            this.$message({
              message: "用户身份已过期，请重新登录",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    //修改员工信息
    updatestaff(form) {
      let params = {
        mail: form.mail,
        mobile: form.mobile,
        userId: JSON.parse(sessionStorage.getItem("userinfo")).userId,
        userName: form.userName,
      };
      this.$refs.updateinforuleform.validate((valid) => {
        if (valid) {
          this.$http
            .post("/user/update", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.updatestaffout();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    loginout() {
      this.$http
        .post("/user/logout")
        .then((res) => {
          if (res.data.h.code == 0) {
            sessionStorage.removeItem("LoginUser");
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("userinfo");
            sessionStorage.removeItem("menu");
            location.reload();
          }
        })
        .catch((err) => {});
    },
    //工单待办
    getworkNum() {
      this.$http
        .get("/site/workNo/workNum")
        .then((res) => {
          if (res.data.h.code == 0) {
            this.ordersize = res.data.b;
          }
        })
        .catch((err) => {});
    },
    enterorder() {
      this.$router.push({ path: "/workorder" });
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    open() {
      this.dialog = true;

      //获取默认阈值
      this.$http.get("/redis/global/th").then((res) => {
        if (res.data.h.code == 0) {
          this.form = Object.assign(this.form, res.data.b);
        }
      });
    },

    //获取阈值
    sub() {
      this.$http.post("/redis/global/setTh", this.form).then((res) => {
        if (res.data.h.code == 0) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$refs.drawer.closeDrawer();
        }
      });
    },
  },
  created() {
    this.push = JSON.parse(sessionStorage.getItem("push"));
    window.addEventListener("keydown", this.keyDown, false);
  },
  mounted() {
    this.username = JSON.parse(sessionStorage.getItem("userinfo")).userName;
    this.getworkNum();
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>
<style scoped>
.topside {
  height: 84px;
  z-index: 5;
}
.right {
  display: inline-block;
  float: right;
  height: 100%;
  line-height: 60px;
  margin-right: 20px;
  margin-top: 35px;
}
.el-badge {
  height: 40px;
  line-height: 40px;
}
.el-switch /deep/.el-switch__label {
  color: rgba(184, 222, 255, 1) !important;
  font-size: 16px !important;
}
.el-badge .el-button {
  background: transparent !important;
  border: 0;
  color: rgba(184, 222, 255, 1);
  font-size: 16px;
}
.el-badge /deep/.el-badge__content {
  border: 0;
  margin-top: 10px;
}
.right i {
  color: #fff;
}
.el-dropdown {
  margin-left: 20px;
}
.el-dropdown-menu {
  background: #003070;
  padding: 0;
}
.el-dropdown-menu__item {
  color: #fff;
}
h4 {
  display: inline-block;
  text-align: center;
  color: rgba(184, 222, 255, 1);
  font-size: 16px;
  float: left;
  cursor: pointer;
}
.setting{
  text-align: center;
  color:rgba(184, 222, 255, 1) !important;
}
.el-drawer__wrapper >>> .el-drawer {
  background-color: #061435 !important;
}
.el-drawer__wrapper >>> .el-drawer__header span{
  text-align: center;
}
.el-drawer__wrapper >>> span {
  color: #fff;
}
.el-drawer__wrapper >>> .demo-drawer__footer {
 text-align: right;
 margin-right:10px;
}
.staff-info .el-form {
  padding: 15px;
  box-sizing: border-box;
}
.staff-info .el-form .el-form-item .el-select {
  display: block;
}
.password-update .el-form {
  padding: 15px;
  box-sizing: border-box;
}
.staff-update .el-form {
  padding: 15px;
  box-sizing: border-box;
}

.model-title{
  font-size: 16px;
  border-left: 3px solid #01E3F6;
  color: #01E3F6;
  padding: 5px 10px 5px 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>